<template>
  <div class="nav-holder">
    <div class="nav-box flex-row-v-center">
      <div class="logo-box" @click="goToHome">
        <img src="~assets/img/tmp/logo.png"/>
      </div>
      <ul class="switch-box flex-row-v-center">
        <li class="item" :class="{'active': activeName === 'home'}">
          <nuxt-link to="/">首页</nuxt-link>
        </li>
        <li class="item" :class="{'active': activeName === 'account-on-sale'}">
          <nuxt-link to="/account-on-sale">在售账号</nuxt-link>
        </li>
        <li class="item" :class="{'active': activeName === 'found-pay'}">
          <nuxt-link to="/found-pay">找回包赔</nuxt-link>
        </li>
        <!--        <li class="item" :class="{'active': activeName === 'about-us'}">-->
        <!--          <nuxt-link to="/about-us">关于我们</nuxt-link>-->
        <!--        </li>-->
      </ul>
      <div class="search-box flex-1 flex-row-v-center">
        <div class="select-box">
          <i-select v-model="selectGame" placeholder="请选择">
            <i-option v-for="item in gameList" :key="item.id" :value="item.name">{{ item.name }}</i-option>
          </i-select>
        </div>

        <input class="input flex-1" v-model="title" placeholder="搜索账号"/>
        <div class="search-btn flex-center" @click="onClickSearch">
          <img src="~assets/img/icon-search.png">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Core from '@/core/core'

export default {
  data() {
    return {
      gameList: [],
      selectGame: '',
      title: ''
    }
  },
  props: {
    activeName: ''
  },
  mounted() {
    this.getGameList()
  },
  methods: {
    goToHome() {
      this.$router.push('/')
    },
    getGameList() {
      this._getGameList(list => {
        this.$store.commit('setGameList', list)
        this.gameList = list
      })
    },
    _getGameList(cb) {
      Core.Api.Game.list({})
        .then(res => {
          if (cb) {
            cb(res.list)
          }
        })
        .catch(err => {
          this.$Message.error(err.msg);
        })
    },
    goToNewPage(item) {
      if (item.url) {
        window.open(item.url, '_blank')
      }
    },
    goToPage(name) {
      this.$router.push({
        name: name
      });
    },
    onClickSearch() {
      if (!this.selectGame) {
        this.$Message.warning('请选择游戏');
        return
      }
      if (this.selectGame === '天涯明月刀') {
        window.open(Core.Const.NET.END_POINT_WEB_TY + 'account-on-sale?title=' + this.title, '_blank')
      } else {
        this.$Message.warning('游戏暂未开通，请等待');
      }
    }
  }
}
</script>

<style lang="scss">
.nav-holder {
  width: 100%;
  min-width: 1200px;
  height: 66px;
  background: #ffffff;
  border-bottom: 1px solid #E6E8EB;

  .nav-box {
    width: 1200px;
    height: 100%;
    margin: auto;

    .logo-box {
      width: 258px;
      cursor: pointer;

      img {
        height: 40px;
      }
    }

    .switch-box {
      height: 100%;

      .item {
        margin-right: 60px;
        font-size: 18px;
        color: #3A3D41;
        cursor: pointer;
        line-height: 62px;

        a {
          color: #3A3D41;
        }

        &.active {
          font-weight: 500;
          border-bottom: 4px solid #F58B01;
        }
      }
    }

    .search-box {
      background: #EEEEEF;
      border-radius: 20px;
      height: 40px;
      padding: 4px;

      .select-box {
        width: 120px;
        height: 32px;
        border-radius: 16px;
        background: #FFFFFF;
        border: 1px solid #E6E8EB;
      }

      .input {
        padding: 0 12px;
        font-size: 14px;
        color: #8D9197;
        border: none;
        background: transparent;
        height: 100%;
        outline: none;
      }

      .search-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;

        img {
          width: 32px;
          height: 32px;
        }
      }
    }
  }
}
</style>
